<template>
  <Swiper>

      <SwiperItem v-for="(item, index) in banners" :key="index">
        <a :href="item.link">
          <img :src="item.image" alt="" @load="imgLoaded">
        </a>
      </SwiperItem>

    </Swiper> 
</template>

<script>
import {Swiper, SwiperItem} from 'components/common/swiper/index';

import {homeMultidata} from 'network/home';

export default {
  name: 'HomeSwiper',
  data() {
    return {
      banners: [],
      isImageLoaded: false
    }
  },
  components: {
    Swiper,
    SwiperItem
  },
  created() {
     // 网络请求后台数据
    homeMultidata().then(res => {
      this.banners = res.data.banner.list;// 网络请求轮播图图片数据

    }).catch(err => {
      console.log(err);

    })
  },
  methods: {
    imgLoaded() {// 图片加载完成发送事件给HOME
      if(!this.isImageLoaded) {
        this.$emit('imgLoaded');
        this.isImageLoaded = true;
      }
    }
  }

}
</script>

<style scoped>
</style>